import React, { useState } from 'react';
import ReactDOM from 'react-dom';
/**
 * ---------------------------------------------------------------------
 * 函数式分页组件
 * ---------------------------------------------------------------------
 */
import Pager from './components/Pager/Pager'
function PagerApp() {
  const [current, setCurrent] = useState(1);
  const handlePageChange = (newPage) => {
    console.log('🚀 ~ handlePageChange ~ newPage:', newPage)
    setCurrent(newPage);
  };
  // 初始数据
  const pagerProps = {
    current: current,
    total: 193,
    limit: 10,
    panelNumber: 5
  };
  return <Pager {...pagerProps} onPageChange={handlePageChange} />;
}
ReactDOM.render(<PagerApp />, document.getElementById('root'));
/**
 * ---------------------------------------------------------------------
 * 函数式分页组件
 * ---------------------------------------------------------------------
 */

/**
 * ---------------------------------------------------------------------
 * 运动小球
 * ---------------------------------------------------------------------
 */
// import BallList from './components/BallList';
// ReactDOM.render(<BallList />, document.getElementById('root'));
/**
 * ---------------------------------------------------------------------
 * 运动小球
 * ---------------------------------------------------------------------
 */

/**
 * ---------------------------------------------------------------------
 * 学生列表
 * ---------------------------------------------------------------------
 */
// import StudentList from './components/StudentList';
// const studentList = [
//   { id: 1, name: 'John', age: 20 },
//   { id: 2, name: 'Jane', age: 21 },
//   { id: 3, name: 'Jim', age: 22 },
// ];
// ReactDOM.render(<StudentList students={studentList} />, document.getElementById('root'));
/**
 * ---------------------------------------------------------------------
 * 学生列表
 * ---------------------------------------------------------------------
 */

/**
 * ---------------------------------------------------------------------
 * 图片轮播
 * ---------------------------------------------------------------------
 */
// import src1 from './assets/1.jpg';
// import src2 from './assets/2.jpg';
// import src3 from './assets/3.jpg';
// let imgs = [src1, src2, src3];
// let index = 0;
// let timer;
// let container = document.getElementById('root');
// function render() {
//   ReactDOM.render(<img src={imgs[index]} alt="" />, container);
// }
// function start() {
//   stop();
//   timer = setInterval(() => {
//     index = (index + 1) % imgs.length;
//     render();
//   }, 2000);
// }
// function stop() {
//   clearInterval(timer);
// }
// render();
// start();
// container.onmouseenter = function () {
//   stop();
// }
// container.onmouseleave = function () {
//   start();
// }
/**
 * ---------------------------------------------------------------------
 * 图片轮播
 * ---------------------------------------------------------------------
 */